<template>
  <div class="home">
    <!-- 顶部菜单 -->
    <div class="top">
      <el-menu :default-active="myRoutePath" router class="el-menu-demo" mode="horizontal" background-color="#0A1A31"
        text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
        <div class="t_right">
          <img src="@/assets/SASSlogo.png" alt="">
          <h2>商城管理后台</h2>
        </div>
        <el-menu-item v-for="(menu) in getMenuInfo" :key="menu.menuId" :index="menu.menuUrl"
          :route="menu.menuChilds[0].menuUrl" @click="setChildMenuByUrl(menu.menuUrl, menu.menuName)">
          {{ menu.menuName }}
        </el-menu-item>
      </el-menu>

      <div class="NavRight">
        <div class="yonghu">
          <img src="./../assets/tx.png" alt="">
          <p>admin</p>
        </div>
        <button id="EndBtn">
          <i class="el-icon-switch-button " style="color:white;font-size: 24px;"></i>
        </button>
      </div>
    </div>
    <div class="bottom">
      <div class="b_left">
        <div class="title">{{ title }}</div>
        <Menu :Submenu="Submenu"></Menu>
      </div>
      <div class="b_right">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import Menu from './Menu.vue';
export default {
  name: 'home',
  data() {
    return {
      activeIndex: 2,//默认展示
      Submenu: [],
      title: '首页',
    }
  },
  computed: {//计算属性
    ...mapGetters(['getMenuInfo']),//获取父级动态路由菜单
    myRoutePath() {//刷新后菜单路径确定
      return this.$route.path === '/home' ? '/home/Index' : this.$route.path.split('/').slice(0, 3).join('/')
    }
  },
  created() {
    let path = this.myRoutePath//获取父级URL
    // console.log(this.myRoutePath.split('/').slice(0, 3));
    this.Submenu = this.getSubmenu(path)
    // window.title=this.title
    // console.log(this.Submenu);
  },
  mounted() {
    // console.log(this.Submenu);
  },
  components: {//组件注册模块
    Menu
  },
  methods: {
    getSubmenu(url) {//通过父菜单url获取子菜单
      let state = this.getMenuInfo
      // console.log(state);
      let sub = "";
      for (let i = 0; i < state.length; i++) {
        const el = state[i];
        if (el.menuUrl == url) {
          sub = [...el.menuChilds];
          this.title = el.menuName
          // console.log(sub);
          return sub
        }
      }
    },
    setChildMenuByUrl(url, name) {
      console.log(url);
      this.Submenu = this.getSubmenu(url);
      this.title = name;
      // console.log(this.Submenu);
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
}

#EndBtn {
  background-color: #0A1A31;
  border: none;
}

.yonghu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
  height: 60px;
}

.NavRight {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center;
  color: #fff;
  float: right;
  margin-right: 20px;
  justify-content: space-around;
}

.NavRight img {
  width: 36px;
  height: 37px;
  margin-right: 10px;
  /* display: inline-block; */
  border-radius: 50%;
}

#NavRight>p {
  color: white;
}

.top {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.el-menu-item:hover {
  background-color: rgba(28, 176, 154, 0.3) !important;
  border-bottom: #1cb09a 3px !important;
}

.el-menu-item.is-active {
  color: #fff !important;
  border-bottom: #1cb09a 4px solid !important;
}


img {
  width: 100px;
  height: 60px;
  margin-right: 0;
}

h2 {
  margin-right: 50px;
  line-height: 60px;
}

.el-menu {
  display: flex;
  color: #fff;
}

.el-menu li {
  /* background-color: #0A1A31; */
  width: 120px;
  text-align: center;
}




.t_right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.t_right h2 {
  font-size: 27px;
}

.t_right img {
  height: 48px;
  width: 48px;
  margin-left: 8px;
  margin-right: 12px;
}

.bottom {
  display: flex;
  width: 100%;
  height: 100%;
}

.bottom>>>.b_left {
  width: 10%;
  display: flex;
  text-align: center;
  border-top: 2px solid #225333;
  background-color: #0A1A31;
  flex-direction: column;
  /* position: fixed; */
  /* left: 0; */
}

.el-menu.el-menu--horizontal {
  border: none !important;
}



.b_right {
  overflow: auto;
  width: 100%;
}

::-webkit-scrollbar {
  display: none
}

.title {
  background-color: #0A1A31;
  color: #fff;
  height: 50px;
  line-height: 50px;
}
</style>
